<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>打字练习</title>
        <style>
            body{
                text-align: center;
            }
            #char{
                width: 500px;
                height: 500px;
                /* 设置边框、宽高、样式 */
                border: 4px solid yellow;
                margin: 0 auto;
                /* 设置边框圆角半径，设置为元素宽高的一半时能够显示为圆形 */
                border-radius: 50%;
                /* 设置字体大小 */
                font-size: 400px;
                /* 设置文本对齐方式 为水平居中*/
                /* text-align: center; */
                color: yellow;
                /* 字体颜色 */
                /* 设置行高，当行高与元素本身高度一样时，可以实现文本垂直居中 */
                line-height: 500px;
            }
            #result{
                color: #0ff;
                font-size: 50px;
                font-family: "隶书"
            }
        </style>
    </head>
    <body>
        <div id="char"></div>
        <p id="result">正确0个，错误0个，正确率0%</p>
    </body>
    <script>
       var oKey=null;
             var oRe=document.getElementById('result')
       
       var oBox=document.getElementById('char');
        //生成随机字母的函数
        function creatChar(){
            //Math.random() 生成一个[0,1)的随机数，可能等于0但不会等于1.
            var num = Math.random();
            var arr=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","X","Y","Z"]
            oKey=arr[Math.floor(num*25)];
            oBox.textContent=oKey;
        }
        creatChar();
         //onkeydown     键盘按下事件
        var num=0;
        var wNum=0;
        var rNum=0;
        var pNum=0;
         document.body.onkeydown=function(e){
             num++;
             var input=e.key.toUpperCase()
             if(input==oKey)
                {
                    creatChar();
                    rNum++;
                }
             else
                {
                    alert('错误')
                    wNum++;
                }
            pNum=parseInt(rNum/num*100);
            oRe.innerHTML="正确"+rNum+"个，错误"+wNum+"个，正确率"+pNum+"%"
           
        }
    </script>
</html>